<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HIS UI</title>
    <link rel="stylesheet" type="text/css" href="../../dist/css/hisui.css">
    <script type="text/javascript" src="../../dist/js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../../dist/js/jquery.hisui.js"></script>   
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script src="../jquery-tag-demo.js" type="text/javascript"></script>
</head>
<body>
    <h2>单选框，源自于Bootstrap的iCheck插件</h2>
    <h3>说明:</h3>
    <span>用于多选一的业务场情。</span>
    <h3>如：</h3>
   <div class="demo-exp-code entry-content"> 
        <table cellpadding="5">
            <tr>
                <td>
                    想吃什么
                </td>
                <td></td>
                <td id="eatlist">
                    <input class='hisui-radio' type="radio" label='苹果' name='wantEat' value="apple">
                    <input class='hisui-radio' type="radio" label='桔子' name='wantEat' value="orange">
                    <input class='hisui-radio' type="radio" label='香蕉' name='wantEat' value="banana" id="ba">
                </td>
                <td>
                    <a id="selectba" class="hisui-linkbutton" href="#">选中香蕉</a>
                    <a id="insertRadio" class="hisui-linkbutton" href="#">插入梨</a>
                    <a id="getValue" class="hisui-linkbutton" href="#">获得选中值</a>
                </td>
            </tr>
        </table><pre class="prettyprint lang-html"><code>&lt;table cellpadding="5">
    &lt;tr>
        &lt;td&gt;想吃什么&lt;/td &gt;
        &lt;td id="eatlist" &gt;
            &lt;input class='hisui-radio' type="radio" label='苹果' name='wantEat' value='apple'&gt;
            &lt;input class='hisui-radio' type="radio" label='桔子' name='wantEat' value='orange'&gt;
            &lt;input class='hisui-radio' type="radio" label='香蕉' name='wantEat' value='banana' id="ba"&gt;
        &lt;/td&gt;
        &lt;td&gt;
            &lt;a id="selectba" class="hisui-linkbutton" href="#"&gt;选中香蕉&lt;/a&gt;
            &lt;a id="insertRadio" class="hisui-linkbutton" href="#"&gt;插入梨&lt;/a&gt;
            &lt;a id="getValue" class="hisui-linkbutton" href="#"&gt;获得选中值&lt;/a&gt;
        &lt;/td>
    &lt;/tr>
&lt;/table&gt;
&lt;script&gt;
    $(function(){
        $HUI.radio("[name='wantEat']",{
            onChecked:function(e,value){
                logger.info($(e.target).attr("label"));  //输出当前选中的label值
            }
        });
        $("#selectba").click(function(){
            $HUI.radio("#ba").setValue(true);
        });
        $("#insertRadio").click(function(){
            // 插入选项
            $("#eatlist").append("&lt;input class='hisui-radio' type='radio' label='黄金梨' value='pear1' name='wantEat'&gt;");
            $("#eatlist").append("&lt;input class='hisui-radio' type='radio' label='秋月梨' value='pear2' name='wantEat'&gt;");
            $("#eatlist").append("&lt;input class='hisui-radio' type='radio' label='黄梨' value='pear3' name='wantEat'&gt;");
            $("#eatlist").append("&lt;input class='hisui-radio' type='radio' label='鸭梨' value='pear4' name='wantEat'&gt;");
            $HUI.radio("#eatlist input.hisui-radio",{});
        });
        $("#getValue").click(function(){
            // 获得选中的水果
            var checkedRadioJObj = $("input[name='wantEat']:checked");
            $.messager.alert("提示","value="+checkedRadioJObj.val()+" , label="+checkedRadioJObj.attr("label"));
        })
    });
&lt;/script&gt;</code></pre></div>

    </div>
    <div>
        <h3>单选组件的相关配置、事件、方法</h3>
        <table class="table">
            <tr class="protitle">
                <th>属性</th>
                <th>说明</th>
                <th>默认值</th>
                <th></th>
            </tr>
            <tr>
                <td>name</td>
                <td>radio的名字</td>
                <td>''</td>
                <td></td>
            </tr>
            <tr>
                <td>label</td>
                <td>描述</td>
                <td>''</td>
                <td></td>
            </tr>
            <tr>
                <td>disabled</td>
                <td>是否禁用。默认可用</td>
                <td>false</td>
                <td></td>
            </tr>
            <tr>
                <td>checked</td>
                <td>是否选中。默认不选中</td>
                <td>false</td>
                <td></td>
            </tr>
            <tr class="evttitle">
                <th>事件名</th>
                <th>说明</th>
                <th>入参</th>
                <th></th>
            </tr>
            <tr>
                <td>onCheckChange</td>
                <td>选中改变事件</td>
                <td>e,value</td>
                <td></td>
            </tr>
            <tr>
                <td>onChecked</td>
                <td>选中事件</td>
                <td>e,value</td>
                <td></td>
            </tr>
            <tr class="mthtitle">
                <th>方法名</th>
                <th>说明</th>
                <th>入参</th>
                <th>返回值</th>
            </tr>
            <tr>
                <td>options</td>
                <td>拿到配置项对象</td>
                <td></td>
                <td>jquery对象</td>
            </tr>
            <tr>
                <td>setValue</td>
                <td>选中元素</td>
                <td>false|true</td>
                <td>jquery对象</td>
            </tr>
            <tr>
                <td>getValue</td>
                <td>拿到值</td>
                <td></td>
                <td>false|true</td>
            </tr>
            <tr>
                <td>setDisable</td>
                <td>禁用</td>
                <td>false|true</td>
                <td>jquery对象</td>
            </tr>
            <tr>
                <td>check</td>
                <td>选中</td>
                <td></td>
                <td>jquery对象</td>
            </tr>
            <tr>
                <td>uncheck</td>
                <td>取消选中</td>
                <td></td>
                <td>jquery对象</td>
            </tr>
            <tr>
                <td>toggle</td>
                <td>切换选中</td>
                <td></td>
                <td>jquery对象</td>
            </tr>
            <tr>
                <td>disable</td>
                <td>禁用选框</td>
                <td></td>
                <td>jquery对象</td>
            </tr>
            <tr>
                <td>enable</td>
                <td>启用选框</td>
                <td></td>
                <td>jquery对象</td>
            </tr>
            <tr>
                <td>indeterminate</td>
                <td>设置不定选状态</td>
                <td></td>
                <td>jquery对象</td>
            </tr>
            <tr>
                <td>determinate</td>
                <td>取消不定选状态</td>
                <td></td>
                <td>jquery对象</td>
            </tr>
            <tr>
                <td>update</td>
                <td>重绘选框</td>
                <td></td>
                <td>jquery对象</td>
            </tr>
            <tr>
                <td>destroy</td>
                <td>销毁选框</td>
                <td></td>
                <td>jquery对象</td>
            </tr>
        </table>
    </div>
    <script>
        $(function(){
            logger.level=1;
            $HUI.radio("[name='wantEat']",{
                onChecked:function(e,value){
                    logger.info($(e.target).attr("label"));  //输出当前选中的label值
                }
            });
            $("#selectba").click(function(){
                $HUI.radio("#ba").setValue(true);
            });
            $("#insertRadio").click(function(){
                $("#eatlist").append("<input class='hisui-radio' type='radio' label='黄金梨' value='pear1' name='wantEat'>");
                $("#eatlist").append("<input class='hisui-radio' type='radio' label='秋月梨' value='pear2' name='wantEat'>");
                $("#eatlist").append("<input class='hisui-radio' type='radio' label='黄梨' value='pear3' name='wantEat'>");
                $("#eatlist").append("<input class='hisui-radio' type='radio' label='鸭梨' value='pear4' name='wantEat'>");
                $HUI.radio("#eatlist input.hisui-radio",{});
            });
            $("#getValue").click(function(){
                var checkedRadioJObj = $("input[name='wantEat']:checked");
                $.messager.alert("提示","value="+checkedRadioJObj.val()+" , label="+checkedRadioJObj.attr("label"));
            })
        });
    </script>
    <prettyprint/>
</body>
</html>